<template>
	<view>
		<view class="container" v-if="!listdata.length">
			<view class="brandinfo">
				<image :src="redbagdetail.avatar" mode="aspectFill"></image>
				<text class="brandnickname">{{redbagdetail.nickname}}</text>
				<text class="brandtip">邀请{{redbagdetail.help_red_condition}}位好友即可领取红包哦~</text>
			</view>
			<image src="/static/image/open-icon.png" @click="openbag" :class="['openbutton',openlucky?'openlucky1':'openlucky2']"
			 mode="aspectFill"></image>
			<view class="bagbottom">已领取{{redbagdetail.help_red_count_s-redbagdetail.help_red_count}}/{{redbagdetail.help_red_count_s}},领完为止</view>
		</view>
		<!--已领取展示内领信息-->
		<view class="receiveinfo" v-else>
			<view class="receivecontent">
				<view class="head"></view>
				<view class="userinfo">
					<image :src="userinfo.avatar" mode="aspectFill"></image>
					<text class="nickname">{{userinfo.nickname}}</text>
					<text class="invite">邀请好友助力，大吉大利领取红包</text>
					<text class="money">￥ {{selfamount}}</text>
					<view class="gotocash" @click="gotomycash">去提现</view>
				</view>
				<view class="recivenow">已领取{{redbagdetail.help_red_count_s-redbagdetail.help_red_count}}/{{redbagdetail.help_red_count_s}}个，共1/{{selfamount}}元</view>
				<view class="receivelist" v-for="(item,index) in listdata" :key="index">
					<view class="receiveitem">
						<image :src="item.avatar"></image>
						<text>{{item.nickname}}</text>
					</view>
					<view class="receviemoney">{{item.amount}}元</view>
				</view>
			</view>
		</view>
		<!--全局加载-->
		<loadingpage v-if="globelloading"></loadingpage>
	</view>
</template>

<script>
	/**
	 * 领取助力红包
	 * e9564f
	 */
	export default {
		data() {
			return {
				globelloading: true,
				userinfo: uni.getStorageSync('user_info'),
				listdata: [],
				redbagdetail: '',
				openlucky: true,
				selfamount: '',
				lucyid: '',
				lock: false,
			}
		},
		onLoad(option) {
			this.lucyid = option.id;
			this.initdata();
		},
		watch: {
			redbagdetail() {
				this.globelloading = false
			}
		},
		methods: {
			//去提现
			gotomycash() {
				uni.navigateTo({
					url: '/pages/cash/cash'
				})
			},
			//领取红包
			openbag() {
				if (this.redbagdetail.my_boost < this.redbagdetail.help_red_condition) {
					this.$ShowMsg('还未达到邀请人数，快去分享好友吧~');
					return;
				}
				if (this.lock) {
					return
				}
				this.lock = true;
				this.openlucky = false;
				setTimeout(() => {
					this.$HttRequest({
						url: '/lottery/helpRedEnvelope',
						param: {
							id: this.lucyid
						}
					}).then((res) => {
						console.log(res);
						if (res.status === 10000) {
							this.lock = false;
							this.openlucky = true;
							this.initdata();
						} else {
							this.$ShowMsg(res.message)
						}
					}).catch((error) => {
						//异常错误
						this.$ShowMsg('statusCode：' + error.errMsg);
					})
				}, 2500)
			},
			//获取初始数据
			initdata() {
				this.$HttRequest({
					url: '/lottery/helpRedEnvelopeList',
					param: {
						id: this.lucyid
					}
				}).then((res) => {
					console.log(res);
					if (res.status === 10000) {
						this.redbagdetail = res.data.detail;
						this.listdata = res.data.list;
						if (this.listdata.length > 0) {
							this.listdata.map((item, index) => {
								if (item.member_id == this.userinfo.id) {
									this.selfamount = item.amount;
								}
							})
						}
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					console.log(error)
				});
			}
		}
	}
</script>

<style lang="scss">
	.receiveinfo {
		width: 100vw;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;

		.receivecontent {
			width: 100%;
			height: auto;
			background-color: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;

			.recivenow {
				display: flex;
				justify-content: flex-start;
				padding: 20rpx 0;
				font-size: 28rpx;
				width: 100%;
				background-color: #f0f0f0;
				padding-left: 20rpx;
				margin-top: 630rpx;
			}

			.receivelist {
				background-color: #f8f8f8;
				height: 140rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-content: center;
				margin: 20rpx 0;
				width: 100%;

				.receiveitem {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #999;
					
					image {
						width: 95rpx;
						height: 95rpx;
						border-radius: 50%;
						margin: 20rpx;
					}
				}

				.receviemoney {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
				}
			}

			.userinfo {
				top: 110rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				position: absolute;
				z-index: 999;
				font-size: 30rpx;
				color: #333;

				.nickname {
					margin: 10rpx 0;
				}

				.invite {
					color: #999999;
					margin: 10rpx 0;
				}

				.money {
					color: #e9564f;
					font-weight: bold;
					font-size: 80rpx;
					margin: 30rpx 0;
				}

				.gotocash {
					width: 160rpx;
					height: 75rpx;
					background-color: #f5f0ef;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #e9564f;
					margin: 20rpx 0;
					border-radius: 30rpx;
				}

				image {
					border: 2rpx solid #fff;
					border-radius: 50%;
					width: 120rpx;
					height: 120rpx;
				}
			}

			.head {
				border: 1rpx solid #000;
				background-color: #e9564f;
				width: 100%;
				height: 120rpx;
				border-radius: 0 0 50% 50%;
				position: relative;
			}

			.head:after {
				content: '';
				width: 120%;
				background-color: #e9564f;
				height: 300rpx;
				position: absolute;
				z-index: 99;
				left: -75rpx;
				border-radius: 50%;
				top: -120rpx;
			}
		}
	}

	.container {
		width: 100vw;
		height: 100vh;
		background: url('/static/image/i_red_bg.png');
		background-repeat: no-repeat;
		background-size: 750rpx;
		background-color: #e75149;
		position: relative;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		color: #fcdfb1;
		font-size: 25rpx;

		.brandinfo {
			margin-top: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				width: 100rpx;
				height: 100rpx;
				border: 1rpx solid #fff;
				border-radius: 50%;
			}

			.brandnickname {
				margin: 30rpx 0;
			}

			.brandtip {
				font-weight: bold;
				font-size: 40rpx;
			}
		}

		.bagbottom {
			position: absolute;
			bottom: 50rpx;
			left: 280rpx;
		}

		.openbutton {
			width: 200rpx;
			height: 200rpx;
			margin-top: 320rpx;
		}
	}

	.openlucky1 {
		animation: btnShake2 2s ease 0s infinite;
	}

	.openlucky2 {
		animation: btnrotateX .8s ease 0s infinite;
	}

	//未开奖动画
	@keyframes btnShake2 {
		0% {
			transform: scale(1);
		}

		40% {
			transform: scale(1.1, 0.9);
		}

		60% {
			transform: scale(.9, 1.1);
		}

		80% {
			transform: scale(1.2, 0.8);
		}

		100% {
			transform: scale(1);
		}
	}

	//旋转动画
	@keyframes btnrotateX {
		0% {
			transform: rotateY(0deg);
		}

		50% {
			transform: rotateY(180deg);
		}

		100% {
			transform: rotateY(360deg);
		}
	}
</style>
